<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 箭头函数用于简化回调函数（匿名函数） -->
    <script>
        function fn1(){

        }
        //赋值型的方式声明函数
        var fn2 = function(x,y){
            return x+y;

        }

        //箭头函数 =>
        var fn3=(x,y)=>x+y;
        console.log(fn3(10,29));
        
        //没有参数
        var fn4 =() =>10

        //多个参数
        var fn4=(x,y)=>x+y;

        var fn5 = function(x,y){
            var z = 10;
            return x+y+z;
        }

        //改写为箭头函数

        var fn6 = (x,y) =>{
            var z = 10;
            return  x+y+z;
        } 

        //由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加一个括号，否则会报错
        var fn7 = function(){
            return{
                x:10,
                y:20,
            }
        }
         //->改写
        var fn8 = () =>({x:10,y:20})

        var arr = [10,12,32];
        arr.map(function(element,index){
            console.log(element);
        })

        //改写
        arr.map((element,index)=>{
            console.log(element);
        })
        
        //使用注意点：对于普通函数来说，内部的this指向函数运行时所在的对象，但是箭头函数这里不成立
        //他没有自己的this对象，内部的this就是定义时上层作用域的this
        var name = "ime";
        var user = {
            name : "dad",
            age:32,
            getName(){
                // console.log(this.name); //user
                setTimeout(()=>{
                    console.log(this.name);
                },1000)
            }
        }
        user.getName();


    </script>
</body>
</html>